<script setup>
import { useRouter, useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import { useUserStore } from '@/store/user';
import { getMessageCommentApi, getMessageGoodApi, getMessageCollectionApi } from '@/apis/message';
import { getMessageAttentionApi, getMessageFansApi, getAdditionalCommentApi } from '@/apis/message';
import { getAtListApi } from '@/apis/message'


const router = useRouter();
const userStore = useUserStore()

const route = useRoute();


let res = []

// #region 跳转组件
const handleSelect = async (selectedIndex) => {
  // console.log(selectedIndex);

  switch (selectedIndex) {
    case '1':
      router.push('/message/comment');
      res = await getMessageCommentApi(userStore.userInfo.id)
      list.value = res
      /* 取消comment的未读数 */
      await userStore.reduceUnreadMessage('numberOfComment')
      break;

    case '2':
      await getAdditionalComment()
      router.push('/message/additionalComment');
      /* 取消追评的未读数 */
      await userStore.reduceUnreadMessage('numberOfAdditionalComment')
      break;
    case '3':
      await getAtList()
      router.push('/message/at');
      /* 取消at的未读数 */
      await userStore.reduceUnreadMessage('numberOfAt')
      break;
    case '4':
      await getFansList()
      router.push('/message/fans');
      /* 取消粉丝的未读数 */
      await userStore.reduceUnreadMessage('numberOfFans')
      break;
    case '5':
      router.push('/message/attention');
      await getMessageAttention()
      /* 取消关注的未读数 */
      await userStore.reduceUnreadMessage('numberOfFollowers')
      break;
    case '6':
      router.push('/message/good');
      res = await getMessageGoodApi(userStore.userInfo.id)
      list.value = res
      /* 取消点赞的未读数 */
      await userStore.reduceUnreadMessage('numberOfGood')
      break;
    case '7':
      router.push('/message/collection');
      res = await getMessageCollectionApi(userStore.userInfo.id)
      list.value = res
      /* 取消收藏的未读数 */
      await userStore.reduceUnreadMessage('numberOfCollection')
      break;
    case '8':
      list.value.total = 0

      router.push(`/message/chat/undefined`);
      /* 取消私信的未读数 */
      // await userStore.reduceUnreadMessage('numberOfSecretMessage')
      break;
    case '9':
      router.push('/message/notice');
      /* 取消系统消息的未读数 */
      await userStore.reduceUnreadMessage('numberOfSystemNotice')
      break;
    default:
      break;
  }
}

// #endregion



// #region 数据位置
const list = ref([])

/* 获得关注列表 */
const getMessageAttention = async () => {
  const res = await getMessageAttentionApi(userStore.userInfo.id)

  list.value = res
}

/* 获得粉丝列表 */
const getFansList = async () => {
  const res = await getMessageFansApi(userStore.userInfo.id)

  list.value = res
}

/* 获得@列表 */
const getAtList = async () => {
  const res = await getAtListApi(userStore.userInfo.id)

  list.value = res
}

const getAdditionalComment = async () => {
  const res = await getAdditionalCommentApi(userStore.userInfo.id)

  list.value = res
}

// #endregion




// #region 分页
const currentPage = ref(1)
const pageSize = ref(10)

const handleChange = async () => {

  const res = await getMessageCommentApi(userStore.userInfo.id, currentPage.value)
  list.value = res
}


// #endregion

const index = ref(null)
onMounted(async () => {

  /* 根据路由的不同，将index的值设为不同的初始值 */
  switch (route.path) {
    case '/message/comment':
      index.value = "1"
      handleSelect("1")
      break;
    case '/message/additionalComment':
      index.value = "2"
      handleSelect("2")
      break;
    case '/message/at':
      index.value = "3"
      handleSelect("3")
      break;
    case '/message/fans':
      index.value = "4"
      handleSelect("4")
      break;
    case '/message/attention':
      index.value = "5"
      handleSelect("5")
      break;
    case '/message/good':
      index.value = "6"
      handleSelect("6")
      break;
    case '/message/collection':
      index.value = "7"
      handleSelect("7")
      break;
    case '/message/notice':
      index.value = "9"
      handleSelect("9")
      break;
    default:
      // 使用 if 语句来匹配以 /message/chat/ 开头的路径
      if (/^\/message\/chat\/.*/.test(route.path)) {
        index.value = "8";
        handleSelect("8");
      }
      break;
  }

})

</script>

<template>
  <div class="container3">

    <span class="message-title">消息中心</span>

    <el-scrollbar style=" height: 60px; border-bottom: 1px solid #999">
      <el-menu :default-active="index" :ellipsis="false" class="menu" mode="horizontal" @select="handleSelect">

        <el-menu-item index="1">
          <el-badge :value="userStore.unreadMessage.numberOfComment" :offset="[0, 10]"
            :hidden="userStore.unreadMessage.numberOfComment === 0">
            评论
          </el-badge>
        </el-menu-item>

        <el-menu-item index="2">
          <el-badge :value="userStore.unreadMessage.numberOfAdditionalComment" :offset="[0, 10]"
            :hidden="userStore.unreadMessage.numberOfAdditionalComment === 0">
            追评
          </el-badge>
        </el-menu-item>

        <el-menu-item index="3">
          <el-badge :value="userStore.unreadMessage.numberOfAt" :offset="[0, 10]"
            :hidden="userStore.unreadMessage.numberOfAt === 0">
            @
          </el-badge>
        </el-menu-item>

        <el-menu-item index="4">
          <el-badge :value="userStore.unreadMessage.numberOfFans" :offset="[0, 10]"
            :hidden="userStore.unreadMessage.numberOfFans === 0">
            粉丝
          </el-badge>
        </el-menu-item>

        <el-menu-item index="5">
          <el-badge :value="userStore.unreadMessage.numberOfFollowers" :offset="[0, 10]"
            :hidden="userStore.unreadMessage.numberOfFollowers === 0">
            关注
          </el-badge>
        </el-menu-item>

        <el-menu-item index="6">
          <el-badge :value="userStore.unreadMessage.numberOfGood" :offset="[0, 10]"
            :hidden="userStore.unreadMessage.numberOfGood === 0">
            点赞
          </el-badge>
        </el-menu-item>

        <el-menu-item index="7">
          <el-badge :value="userStore.unreadMessage.numberOfCollection" :offset="[0, 10]"
            :hidden="userStore.unreadMessage.numberOfCollection === 0">
            收藏
          </el-badge>
        </el-menu-item>

        <el-menu-item index="8">
          <el-badge :value="userStore.unreadMessage.numberOfSecretMessage" :offset="[0, 10]"
            :hidden="userStore.unreadMessage.numberOfSecretMessage === 0">
            私信
          </el-badge>
        </el-menu-item>

        <!-- <el-menu-item index="9">
          <el-badge :value="userStore.unreadMessage.numberOfSystemNotice" :offset="[0, 10]"
            :hidden="userStore.unreadMessage.numberOfSystemNotice === 0">
            系统通知
          </el-badge>
        </el-menu-item> -->

      </el-menu>
      <!-- 这里判断if，没有数据就展示empty，有数据就展示router-view -->
    </el-scrollbar>
    <div class="container-content" :class="{ 'container-content-height': route.fullPath === '/message/chat' }">


      <!-- 私信页面 -->
      <router-view class="content" :getChatList v-if="route.path.startsWith('/message/chat')">
      </router-view>


      <!-- 点赞评论等普通页面 -->
      <el-scrollbar v-else-if="list.total !== 0 && list.total !== null">
        <router-view v-for="(item, index) in list.records" :key="index" :list="item" class="content"
          :getMessageAttention="getMessageAttention"></router-view>
      </el-scrollbar>

      <!-- 无数据页面 -->
      <div v-else>
        <el-empty :image-size="350" />
      </div>
    </div>

    <!-- 这里也是如果没数据就不展示，有数据就展示 -->
    <div v-if="list.total !== 0" class="pagination">
      <el-pagination v-model:current-page="currentPage" background v-model:page-size="pageSize" :background="background"
        layout="prev, pager, next" :total="list.total" @Change="handleChange" />
    </div>

    <!-- 留白 -->
    <div style="height: 30px;" class="hidden-md-and-up"></div>

    <!-- 页脚 -->
    <!-- <foot-info class="hidden-md-and-down"></foot-info> -->
  </div>

</template>

<style lang='scss'>
//电脑端样式
@media screen and (min-width: 768px) {
  .container3 {
    height: 100vh;
    padding: 50px;

    .message-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 30px;
      display: block;
    }

    .menu {
      font-weight: bold;
    }

    .container-content {
      height: 53rem;
      // border: 1px solid red;

      .content {
        // padding-bottom: 10px;
        margin: 0 auto;
        margin-top: 10px;
      }

      .el-scrollbar__thumb {

        display: none !important;

      }
    }

    /* 动态高度 */
    .container-content-height {
      height: 60rem;
    }


    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 30px;

    }

    .empty-pagination {
      height: 100px;
      border: 1px solid red;
    }
  }
}


//手机端样式
@media screen and (max-width: 767px) {
  .container3 {
    height: 100vh;
    padding-top: 50px;

    .message-title {
      font-size: 24px;
      font-weight: bold;
      margin: 10px 0 20px 0;
      display: block;
      text-align: center;
    }

    /* 隐藏滚动条 */
    .el-scrollbar__thumb {
      display: none !important;
    }


    // 控制整个菜单栏的高度
    .el-menu--horizontal {
      --el-menu-horizontal-height: 60px;
    }

    .menu {
      font-weight: bold;
    }

    .content {
      // padding-bottom: 10px;
      margin: 0 auto;
      margin-top: 5px;
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      // width: 30px;

    }
  }


}
</style>
